<div class="mt-16 sm:mx-8 lg:mx-auto max-w-5xl">
  <h1 class="text-3xl font-bold leading-tight text-gray-900 mx-8 sm:mx-0">
    <%= t(".what_brings_you_here") %>
  </h1>

  <div class="sm:grid sm:grid-cols-2 sm:gap-8 mt-8">
    <div class="sm:rounded-lg shadow sm:hover:shadow-lg relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-gray-500">
      <div>
        <span class="inline-flex rounded p-3 bg-gray-100 text-gray-700 ring-4 ring-white">
          <%= inline_svg_tag "icons/outline/briefcase.svg", class: "h-6 w-6", aria_hidden: true %>
        </span>
      </div>
      <div class="mt-8">
        <h3 class="text-lg font-medium">
          <%= link_to new_developer_path, rel: "nofollow", class: "focus:outline-none" do %>
            <span class="absolute inset-0" aria-hidden="true"></span>
            <%= t(".looking_for_work") %>
          <% end %>
        </h3>
        <p class="mt-2 text-sm text-gray-500">
          <%= t(".looking_for_work_help_text") %>
        </p>
      </div>
      <span class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400">
        <%= inline_svg_tag "icons/outline/arrow_right.svg", class: "h-6 w-6", aria_hidden: true %>
      </span>
    </div>

    <div class="sm:rounded-lg shadow sm:hover:shadow-lg relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-gray-500">
      <div>
        <span class="inline-flex rounded p-3 bg-gray-100 text-gray-700 ring-4 ring-white">
          <%= inline_svg_tag "icons/outline/user_group.svg", class: "h-6 w-6", aria_hidden: true %>
        </span>
      </div>
      <div class="mt-8">
        <h3 class="text-lg font-medium">
          <%= link_to new_business_path, rel: "nofollow", class: "focus:outline-none" do %>
            <span class="absolute inset-0" aria-hidden="true"></span>
            <%= t(".hiring_developers") %>
          <% end %>
        </h3>
        <p class="mt-2 text-sm text-gray-500">
          <%= t(".hiring_developers_help_text") %>
        </p>
      </div>
      <span class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400">
        <%= inline_svg_tag "icons/outline/arrow_right.svg", class: "h-6 w-6", aria_hidden: true %>
      </span>
    </div>
  </div>
</div>
